<template>
  <view class="waterfall-item-container">
    <view class="waterfall-item" @tap="onTap">
      <image :src="params.urlLink" mode="widthFix" @load="emitHeight" @error="emitHeight" style="border-radius: 10rpx;"></image>
      <view class="content">
        <view style="font-size: 28rpx;font-weight: 700;color: #000;">{{params.name}}</view>
        <view class="money">
          <view  class="f_s_12" v-if="isShowPrice">
              悬赏金额：
            <text class="c_red">¥ {{params.price}}</text>
          </view>
          <view style="color: #999;font-size: 20rpx;">{{params.typeName}}</view>
        </view>
        <view class="shop-name">
          <u--image :src="params.userProfile" shape="circle" width="50rpx" height="50rpx" v-if="params.userProfile"></u--image>
          <u--image src="/static/img/avatar.png" shape="circle" width="50rpx" height="50rpx" v-else></u--image>
          <view class="ml-2">{{params.userName}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "helangWaterfallItem",
  options: {
    virtualHost: true,
  },
  props: {
    params: {
      type: Object,
      default() {
        return {};
      },
    },
    tag: {
      type: String | Number,
      default: "",
    },
      isShowPrice: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {};
  },
  methods: {
    // 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
    emitHeight(e) {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".waterfall-item-container")
        .boundingClientRect((data) => {
          let height = Math.floor(data.height);
          this.$emit("height", height, this.$props.tag);
        })
        .exec();
    },
    onTap() {
      this.$emit("click", this.$props.index, this.$props.tag);
    },
  },
};
</script>

<style lang="scss" scoped>
.waterfall-item {
  padding: 16rpx 0;
  // background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 28rpx;
  color: #666;
  image {
    display: block;
    width: 100%;
    // 默认设置一个图片的大约值
    height: 350rpx;
  }
  .content {
    margin-top: 16rpx;
    .money {
      margin-top: 8rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .shop-name {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #999;
      display: flex;
      // justify-content: center;
      align-items: center;
    }
  }
}
</style>
